<script setup lang="ts">
import { commitConfig, getConfigAll } from '@/api/config'
import { useConfigStore } from '@/stores/config'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
const config = ref<any>({})
const loading = ref(false)

// 获取配置数据
function getConfigData() {
  loading.value = true
  getConfigAll()
    .then(({ data }) => {
      data.forEach((c) => {
        config.value[c.key] = c.value
      })
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 500)
    })
}
getConfigData()

/**
 * 保存配置
 */
const configStore = useConfigStore()
function save() {
  commitConfig(config.value)
    .then((d) => {
      ElMessage.success(d.msg)
      getConfigData()
      configStore.getData()
    })
    .catch((d) => {
      ElMessage.error(d.msg)
    })
}
</script>
<template>
  <div class="page-root">
    <el-row justify="center" v-loading="loading">
      <el-col :span="24">
        <el-row justify="center" style="margin-bottom: 10px">
          <h1>系统配置</h1>
        </el-row>
      </el-col>
      <el-col :sm="12" :xs="24">
        <el-form label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="系统名"
                ><el-input v-model="config['##sysName']"></el-input
              ></el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="登录验证码">
                <el-switch
                  v-model="config['##Captcha']"
                  active-value="on"
                  inactive-value="off"
                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="注册接口">
                <el-switch
                  v-model="config['##register']"
                  active-value="on"
                  inactive-value="off"
                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="登录页背景图"
                ><el-input disabled v-model="config['']"></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="注册页背景图"
                ><el-input disabled v-model="config['']"></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备案信息首页显示">
                <el-switch
                  v-model="config['##bnSwitch']"
                  active-value="on"
                  inactive-value="off"
                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                />
              </el-form-item>
            </el-col>
            <el-col :lg="12">
              <el-form-item label="备案号"
                ><el-input v-model="config['##BeiANHao']"></el-input
              ></el-form-item>
            </el-col>
            <el-col :lg="12">
              <el-form-item label="网站所有者"
                ><el-input v-model="config['##domain']"></el-input
              ></el-form-item>
            </el-col>
            <el-col :lg="12">
              <el-form-item label="单位名称"
                ><el-input v-model="config['##UnitName']"></el-input
              ></el-form-item>
            </el-col>
            <el-col :lg="12">
              <el-form-item label="备案时间"
                ><el-input v-model="config['##beiAnTime']"></el-input
              ></el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-row justify="center">
          <el-button @click="save" type="warning">保存配置</el-button>
          <el-button @click="getConfigData">刷新配置</el-button>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<style scoped lang="less"></style>
